<template >
  <div>
    <div>
      <Nav></Nav>
      <!-- 标题 -->
      <v-title v-if="gameNewsInfo.gameNews == null">
        暂时不存在该游戏~
      </v-title>
      <v-title v-else-if="gameNewsInfo.gameNews != null">
        {{ gameNewsInfo.gameNews.chiName }}
      </v-title>
      <!-- 搜不到该游戏 -->
      <div v-if="gameNewsInfo.gameNews == null">
        <el-result title="找不到该游戏" subTitle="抱歉~暂时没有搜到相关游戏噢~">
          <template slot="icon">
            <el-image :src="require('@/assets/logo.png')" style="width: 200px; height: 200px"/>
          </template>
          <template slot="extra">
            <router-link to='/gameNews'><el-button type="primary" size="medium">返回</el-button></router-link>
          </template>
        </el-result>
      </div>
      <!-- 搜到该游戏信息页面处理 -->
      <div v-else-if="gameNewsInfo.gameNews != null">
        <br />
        <el-row>
          <el-col :span="10" :offset="4">
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right" replace>
              <el-breadcrumb-item :to="`/gameNews`" replace>游戏资讯</el-breadcrumb-item>
              <el-breadcrumb-item :to="`/gameNewsDetail/${gameNewsId}`" replace>{{ gameNewsInfo.gameNews.chiName }}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>
        <!-- 标题 -->
        <el-row>
          <el-col :span="10" :offset="4">
            <h2>
              {{ gameNewsInfo.gameNews.chiName}}
              <span v-if="gameNewsInfo.gameNews.otherName != null && gameNewsInfo.gameNews.otherName != ''">({{ gameNewsInfo.gameNews.otherName }})</span>
            </h2>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <!-- 图片相关 左边 -->
          <el-col :span="10" :offset="4">
            <div>
              <el-carousel :interval="5000" arrow="always">
                <el-carousel-item
                  v-for="item in gameNewsInfo.gameNewsDetail.picUrl"
                  :key="item"
                >
                  <el-image :src="item" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <br />
            <div>
              <span v-for="item in gameNewsInfo.gameNewsDetail.picUrl">
                <el-image
                  style="width: 106px; height: 106px"
                  :src="item"
                  :preview-src-list="gameNewsInfo.gameNewsDetail.picUrl"
                  lazy
                />
              </span>
            </div>
          </el-col>
          <!-- 右边 -->
          <el-col :span="5" :offset="2">
            <el-row>
              <el-image
                style="width: 100%; height: 188px"
                :src="gameNewsInfo.gameNews.imgUrl"
              />
            </el-row>
            <br />
            <el-row>
              <el-col :md="6"><span class="rightTitle">游戏基因</span></el-col>
              <el-col :md="18">
                <span
                  v-for="(item, index) in gameNewsInfo.gameNews.gameGene.split(
                    ','
                  )"
                  style="width: 33%"
                >
                  <el-tag type="info">{{ item }}</el-tag>
                  <span
                    v-if="
                      index + 1 <
                      gameNewsInfo.gameNews.gameGene.split(',').length
                    "
                    >&nbsp;</span
                  >
                </span>
              </el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :md="6"><span class="rightTitle">开发商</span></el-col>
              <el-col :md="18"
                ><span class="rightContent">{{
                  gameNewsInfo.gameNewsDetail.developCompany
                }}</span></el-col
              >
            </el-row>
            <br />
            <el-row>
              <el-col :md="6"><span class="rightTitle">发行商</span></el-col>
              <el-col :md="18"
                ><span class="rightContent">{{
                  gameNewsInfo.gameNewsDetail.publishCompany
                }}</span></el-col
              >
            </el-row>
          </el-col>
        </el-row>

        <!-- 额外信息 -->
        <el-row v-if="gameNewsInfo.gameNewsDetail.gameContent.编辑的话 != null">
          <el-row>
            <el-col :span="10" :offset="4">
              <h3>编辑的话</h3>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="4">
              {{ gameNewsInfo.gameNewsDetail.gameContent.编辑的话 }}
            </el-col>
          </el-row>
        </el-row>

        <el-row v-if="gameNewsInfo.gameNewsDetail.gameContent.关于游戏 != null">
          <el-row>
            <el-col :span="10" :offset="4">
              <h3>关于游戏</h3>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="4">
              {{ gameNewsInfo.gameNewsDetail.gameContent.关于游戏 }}
            </el-col>
          </el-row>
        </el-row>
        <br />
        <el-row v-if="gameNewsInfo.gameNewsDetail.picUrl.length > 0">
          <el-row v-for="pic in gameNewsInfo.gameNewsDetail.picUrl">
            <el-col :span="10" :offset="4">
              <el-image :src="pic"></el-image>
            </el-col>
          </el-row>
        </el-row>
        <br />
        <el-divider>亲~已经看到底了吖~</el-divider>
        <br />

        <el-backtop />
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import { getGameNewsDetail } from "@/api/index";
export default {
  name: "",
  components: {
    Nav,
    VTitle,
  },
  mounted() {
    this.getGameInfoData(this.gameNewsId);
  },
  data() {
    return {
      gameNewsId: this.$route.params.gameNewsId,
      gameNewsInfo: {},
    };
  },

  methods: {
    async getGameInfoData(gameNewsId) {
      let that = this;
      await getGameNewsDetail(gameNewsId).then((res) => {
        if (res.code == "200") {
          if (res.data != null) {
            that.gameNewsInfo = res.data;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.rightTitle {
  width: 65px;
  float: left;
  font-size: 12px;
  line-height: 20px;
  color: #a5aab8;
  top: 0;
  left: 0;
}
.rightContent {
  font-size: 12px;
  line-height: 20px;
  color: #000;
  margin: 0 10px 0 0;
  display: inline;
}
.el-tag {
  width: 30%;
  margin-bottom: 10px;
}
.goTop {
  height: 100vh;
  overflow-x: hidden;
}
</style>
